<template>
	<view class="setBlcok" @click="close">
		<view class="setCenter">
			<image src="../../static/image/oexselectbincloseicon.png" class="close" @click.stop="close"></image>
			<view class="title">交易设置</view>
			<view class="huadian">最大滑点</view>
			<view class="btns">
				<text class="active">1%</text><text>5%</text><text>10%</text>
			</view>
			<view class="set">
				<input type="number" placeholder="自定义最大滑点" placeholder-class="setPlaceholder"/>
				<text class="danwei">%</text>
			</view>
			<text class="tips">*如果您提交交易后，价格变化超过滑点保护的范围，交易将被撤销</text>
			<image src="../../static/image/oexconfirmBtn.png" class="confirmbtn"></image>
		</view>
	</view>
</template>

<script>
	export default{
		name:"setTranscation",
		data(){
			return{
				
			}
		},
		props:{
			
		},
		methods:{
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style scoped>
	.setBlcok{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background:rgba(20,20,38,0.8);
		z-index: 5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.setCenter{
		width: calc(714rpx - 94rpx);
		height: calc(741rpx - 40rpx);
		background: #FAFAFA;
		opacity: 1;
		border-radius: 65rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		padding: 20rpx 47rpx;
		
	}
	.close{
		position: absolute;
		right: 50rpx;
		top: 50rpx;
		width: 54rpx;
		height: 54rpx;
	}
	.title{
		width: 100%;
		height: auto;
		text-align: center;
		font-size:15px;
		color: #00C9A7;
		margin-top: 49rpx;
		margin-bottom: 62rpx;
	}
	.huadian{
		font-size: 13px;
		color: #141426;
		margin-bottom: 18rpx;
	}
	.btns{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.btns text{
		width: 150rpx;
		height: 65rpx;
		border-radius: 50rpx;
		margin-right: 33rpx;
		border: 1px solid #00C9A7;
		color: #00C9A7;
		font-size: 12px;
		text-align: center;
		line-height: 65rpx;
	}
	.btns :last-child{
		margin-right: 0;
	}
	.btns .active{
		background: #00C9A7;
		color: #FFFFFF;
		
	}
	.set{
		width: calc(621rpx - 72rpx);
		height: calc(109rpx - 40rpx);
		background: rgba(201,202,206,0.38);
		border-radius: 18rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 36rpx;
		position: relative;
		margin-top: 36rpx;
		margin-bottom: 36rpx;
	}
	.set input{
		color: #00C9A7;
		font-size: 13px;
	}
	.setPlaceholder{
		font-size: 13px;
		color: #8687A3;
	}
	.danwei{
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 13px;
		color: #141426;
	}
	.tips{
		color: #8687A3;
		font-size: 12px;
		margin-bottom: 60rpx;
	}
	.confirmbtn{
		width: 100%;
		height: 116rpx;
	}
</style>
